<!--
 * @Author: your name
 * @Date: 2022-04-18 22:13:47
 * @LastEditTime: 2022-05-13 15:07:36
 * @LastEditors: gong.jiuhui you@example.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\apply\chooseTag.vue
-->
<template>
  <div class="choose-content" :style="{top: GLOBAL.currentEnvironment ? '0.2rem' : '0.6rem'}">
    <div class="bb"></div>
    <Search
      ref="topSearch"
      class="search2"
      placeholder="商品名称|商品编号"
      :isAdd="false"
      :isScreen="false"
      :isType="true"
      @onSearch="onSearch"
      :style="{top: GLOBAL.currentEnvironment ? '0' : '0.4rem'}"
    ></Search>
    
     <pageList
      ref="pageList"
      class="pageList"
      :isPage="false"
      :checkedShow="checkedShow"
      :columns="columns"
      :listUrl="listUrl"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
    >

     <div class="rt-column" slot="body" slot-scope="{ item }" >
       <div class="rt-row">
                  <div class="column">
                    <span class="column-t">订购数量</span>
                    <span class="column-c">{{item.saleNum}}{{item.unit}}</span>
                  </div>
                  <div class="column">
                    <span class="column-t">订购基本数量</span>
                    <span class="column-c" style="color: #FF4D4F;">{{item.saleBasicNum}}{{item.basicUnit}}</span>
                  </div>
                </div>
                <div class="rt-row">
                  <div class="column">
                    <span class="column-t">已申请发货数量</span>
                    <span class="column-c">{{item.shippingNum}}{{item.unit}}</span>
                  </div>
                  <div class="column">
                    <span class="column-t">可申请发货数量</span>
                    <span class="column-c" style="color: #FF4D4F;">{{item.availableShippingNum}}{{item.unit}}</span>
                  </div>
                </div>
         </div>
    </pageList>
 


  </div>
</template>

<script>

import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import moment from "moment";
import Search from "@/components/search";
import pageList from "@/components/pageList";
export default {
   props: {
    //父子组件需要传递的值
    contractId: {
      type: String,
      default: "",
    }
  },
  name: "search",
  components: { Navbar, ContactPickers,upload,Search,pageList},
  data() {
    return {
        keywords:"",
        checkedShow:false,
        params: {
       
        },
        listUrl: "/salemgt/erpShippingApply/findShippingItem?contractId="+this.contractId, //列表接口
           columns: {
        titleKey: "goodsName", //标题
        // subtitleKey: "description",//副标题
        content: [
          //内容
          {
            name: "承交日期",
            key: ["promiseDate"],
            style: "color:red",
          },
          {
            name: "生产物品",
            key: ["goodsName", "goodsCode"],
            keySymbol: "|", //间隔符号,
            // style:"color:red"
          },
        ],
        labelKey: ["goodsCode", "spec"], //标签
        labelText: {
          goodsCode: "商品编号：",
          spec: "商品规格：",
        }, 
      },
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
  //列表点击事件
    onSearch(v){
        this.keywords = v;
      console.log(this.keywords);
      this.searchQuery();
    },
     // 搜索
    searchQuery(v) {
      // 搜索条件
      let queryParam = {
        keyword: this.keywords,
        ...this.params,
      };
      this.$refs.pageList.searchQuery(queryParam);
    },
    handleList(id, item, type) {
      this.$emit('chooseTag', item)
      // console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
    },
     // 加载列表
    getList() {
      console.log("pppppppppppppppp")
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
     // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    cancel() {

      this.fzrName=""
      this.createdByName=""
      this.params = Object.assign({}, formP)
      this.$emit('chooseTag')

    // this.$router.push({ path: '/approval', query: {approveType:1,taskId:"4555"} })

    },
    confirm() {
      // this.$router.push({ path: "/carRoomList" });
      this.$emit('getCategory', this.params)
    },
  },
};
</script>
<style lang="scss" scoped>
.choose-content {
  //  padding-bottom: 0.5rem;
    position: fixed;
    top: 0.6rem;
    width: 100%;
    height: 100vh;
     overflow-y: scroll;
    // background: #fff;
    background: rgb(245, 245, 245);
    z-index: 99;
    .bb {
    height: 0.3rem;
  }
  .pageList{
    margin-top:0.1rem;
  }
   .search2 {
    width: 100%;
    position: fixed;
    top: 0.4rem;
    z-index: 10;
  }
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;
   
    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
  .rt-column{
   
     padding: 0.17rem 0 0 0.17rem;
    //  border: 1px solid red;
  }
   .rt-row {
            display: flex;
            justify-content: space-between;
           
            margin-bottom: 0.17rem;
           
            .column {
              //  border: 1px solid red;
               width: 1.5rem;
              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
                
              }
              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
}
</style>